<template>
  <div class="show-line">
    <div style="width: 80%; height: 350px;" ref="box"></div>
  </div>
</template>

<script>
// 引入图表的内容
// import * as echarts from 'echarts'
export default {
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    option: {
      type: Object,
      default: () => {}
    },
    str: {
      type: String,
      default: ''
    }
  },
  mounted() {
    this.initLine()
  },
  methods: {
    initLine() {
      // 1.0 初始化实例
      const myChart = this.$echarts.init(this.$refs.box)
      if (this.str === 'goods') {
        this.option.xAxis[0].data = Object.keys(this.info)
        this.option.series[0].data = Object.values(this.info)
      }
      // 3.0 调用render函数
      myChart.setOption(this.option)
    }
  },
  watch: {
    info: {
      handler() {
        this.initLine()
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.show-line {
  background-color: #fff;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
}
</style>
